﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<!--<script type="text/javascript">-->

<!--	// 原始JavaScript实现全选，全不选-->

<!--	// 1. 全选(静态注册onclick事件)-->
<!--	function checkAll(){-->
<!--		var checkboxs = document.getElementsByName("items");-->
<!--		for(var i = 0 ;i<checkboxs.length; i++){-->
<!--			checkboxs[i].checked = true;-->
<!--		}-->
<!--	}-->

<!--	window.onload = function(){-->
<!--		// 1. 全选(动态注册onclick事件)-->
<!--		var checkedAllBtn = document.getElementById("checkedAllBtn");-->
<!--		checkedAllBtn.onclick = function(){-->
<!--			var checkboxs = document.getElementsByName("items");-->
<!--			for(var i = 0 ;i<checkboxs.length; i++){-->
<!--				checkboxs[i].checked = true;-->
<!--			}-->
<!--		}-->

<!--		// 全选/全不选-->
<!--		var checkedAllBox = document.getElementById("checkedAllBox");-->
<!--		checkedAllBox.onchange = function(){-->
<!--			if(checkedAllBox.checked){-->
<!--				checkAll();-->
<!--			}else{-->
<!--				checkAllNo();-->
<!--			}-->
<!--		}-->

<!--	}-->

<!--	// 2. 全不选-->
<!--	function checkAllNo(){-->
<!--		var checkboxs = document.getElementsByName("items");-->
<!--		for(var i = 0 ;i<checkboxs.length; i++){-->
<!--			checkboxs[i].checked = false;-->
<!--		}-->
<!--	}-->

<!--	// 3. 反选-->
<!--	function checkReverse(){-->
<!--		var checkboxs = document.getElementsByName("items");-->
<!--		for(var i = 0; i<checkboxs.length;i++){-->
<!--			checkboxs[i].checked = !checkboxs[i].checked;-->
<!--		}-->
<!--	}-->

<!--	// 4. 提交(输出选中的每一个元素)-->
<!--	function print(){-->
<!--		var checkboxs = document.getElementsByName("items");-->
<!--		for(var i = 0; i<checkboxs.length;i++){-->
<!--			if(checkboxs[i].checked){-->
<!--				alert(checkboxs[i].value);-->
<!--			}-->
<!--		}-->
<!--	}-->
<!--</script>-->

	<script type="text/javascript">

		// 使用jQuery实现功能
		$(function(){

			// 给全选绑定单击事件
			$("#checkedAllBtn").click(function(){
				$(":checkbox").prop("checked",true);
			});

			// 给全不选绑定单击事件
			$("#checkedNoBtn").click(function(){
				$(":checkbox").prop("checked",false);
			});

			// 反选单击事件
			$("#checkedRevBtn").click(function(){
				// 查询全部的球类的复选框
				$(":checkbox[name='items']").each(function(){
					this.checked = !this.checked;
				});

				// 检查是否满选
				// 获取全部的球类个数
				let allCount = $(":checkbox[name='items']").length;
				// 再获取选中的球类个数
				let checkedCount = $(":checkbox[name='items']:checked").length;
				$("#checkedAllBox").prop("checked",allCount === checkedCount);
			});

			// 给提交按钮加上单击事件
			$("#sendBtn").click(function () {
				// 获取选中的球类复选框
				$(":checkbox[name='items']:checked").each(function () {
					alert(this.value);
				})
			});

			// 给全选/全不选绑定单击事件
			$("#checkedAllBox").click(function () {
				$(":checkbox[name='items']").prop("checked",this.checked);
			});

			// 给所有的球类绑定单击事件
			$(":checkbox[name='items']").click(function () {
				// 检查是否满选
				// 获取全部的球类个数
				let allCount = $(":checkbox[name='items']").length;
				// 再获取选中的球类个数
				let checkedCount = $(":checkbox[name='items']:checked").length;
				$("#checkedAllBox").prop("checked",allCount === checkedCount);
			});
		});

	</script>
</head>
<body>

	<form method="post" action="">
	
		你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 
		
		<br />
		<input type="checkbox" name="items" value="足球" />足球
		<input type="checkbox" name="items" value="篮球" />篮球
		<input type="checkbox" name="items" value="羽毛球" />羽毛球
		<input type="checkbox" name="items" value="乒乓球" />乒乓球
		<br />
		<input type="button" id="checkedAllBtn" value="全　选"/>
		<input type="button" id="checkedNoBtn" value="全不选" />
		<input type="button" id="checkedRevBtn" value="反　选" />
		<input type="button" id="sendBtn" value="提　交" />
	</form>

</body>
</html>